<template>
  <div class="container">
    <div class="calendar-header">
      <div class="now-day">{{nowDay}}</div>
      <div class="week-day">{{weekDay}}</div>
    </div>
    <div class="calendar-body">
      <div class="date-header">
        <div class="header-item" v-for="(item, i) in dateHeader" :key="i">
          {{item}}
        </div>
      </div>
      <div class="date-body">
        <div v-for="(item, i) in dayList" :key="i">
          <div class="today-item" v-if="item.isToday">
            <div class="today day">今</div>
          </div>
          <div :class="item.isMonth ? 'body-item' : 'dark-item'" v-else >
            <div class="day">
              {{item.day}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        weekDay: '',
        nowDay: '',
        nowMonthDay: new Date().getDate(),
        dateHeader: ['日', '一', '二', '三', '四', '五', '六'],
        dayList: []
      }
    },
    mounted() {
      this.getWeekDay()
      this.nowDay = new Date().getFullYear() + '年' + (new Date().getMonth() >= 9 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1)) + '月'
      this.getMonthDayList()

    },
    methods: {
      getWeekDay() {
        console.log(new Date().getDay())
        switch(new Date().getDay()) {
          case 1:
            this.weekDay = "星期一";
            break;
          case 2:
            this.weekDay = "星期二";
            break;
          case 3:
            this.weekDay = "星期三";
            break;
          case 4:
            this.weekDay = "星期四";
            break;
          case 5:
            this.weekDay = "星期五";
            break;
          case 6:
            this.weekDay = "星期六";
            break;
          case 0:
            this.weekDay = "星期日";
            break;
        }
      },
      getMonthDayList() {
        let monthFirstDay = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-1'
        let startIndex = new Date(monthFirstDay).getDay()
        let lastMonthFinalDay = new Date(new Date().getFullYear(), new Date().getMonth(), 0).getDate()
        let nowMonthFinalDay = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate()
        let lastMonth = []
        for(let i = lastMonthFinalDay; i > lastMonthFinalDay - startIndex; i--) {
          let obj = {
            day: i,
            isMonth: false
          }
          lastMonth.push(obj)
        }
        lastMonth.sort()
        let nowMonth = []
        for(let i = 1; i <= nowMonthFinalDay; i++) {
          let obj = {
            day: i,
            isMonth: true
          }
          if (i === this.nowMonthDay) {
            obj.isToday = true
          }
          nowMonth.push(obj)
        }
        let finalMonth = lastMonth.concat(nowMonth)

        let nextMonth = []
        for(let i = 1; i <= 35 - finalMonth.length; i++) {
          let obj = {
            day: i,
            isMonth: false
          }
          nextMonth.push(obj)
        }
        this.dayList = finalMonth.concat(nextMonth)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: inherit;
    padding: 0 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: inherit;
      margin-bottom: 18px;

      .now-day {
        font-family: PingFangSC-Semibold;
        font-size: 18px;
        color: #FFFFFF;
      }

      .week-day {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #FFFFFF;
        text-align: right;
      }
    }

    .calendar-body {
      .date-header {
        display: flex;
        width: inherit;
        margin-bottom: 18px;
       .header-item {
         width: calc(100vw / 7);
         text-align: center;
         display: flex;
         align-items: center;
         justify-content: center;
         font-family: PingFangSC-Regular;
         font-size: 14px;
         color: rgba(255, 255, 255, .59);
       }
      }

      .date-body {
        display: flex;
        flex-wrap: wrap;
        overflow-x: hidden;

        .body-item, .today-item, .dark-item {
          width: calc(305px / 7);
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          .day {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            text-align: center;
          }
        }

        .dark-item {
          opacity: 0.38;
        }

        .today-item {
          .today {
            background: #457BF8;
          }
        }
      }
    }
  }
</style>
